<template>
	<view class="page">
		<!-- 头部 -->
		<view class="head_box">
			<view class="l_box">
				<image src="https://www.dingxians.cn/upload/20240801/66aae13cedc45.png" mode="scaleToFill" />
			</view>
			<view class="r_box">
				在线开盒 | 正品保障 | 100%中奖
			</view>
		</view>
		<!-- 分类 -->
		<view class="allSta_box">
			<view class="sta_box" v-for="item, index in staList" :key="index" @click="staBtn(item)">
				<view class="t_img_box">
					<image :src="item.imgUrl" mode="scaleToFill" />
				</view>
				<view class="b_nam_box">
					<view class="l_i_box" v-if="status == item.id">
						<image src="https://www.dingxians.cn/upload/20240801/66aae13ceca2e.png" mode="scaleToFill" />
					</view>
					<view class="c_t_box">{{ item.title }}</view>
					<view class="r_i_box" v-if="status == item.id">
						<image src="https://www.dingxians.cn/upload/20240801/66aae13cf3b61.png" mode="scaleToFill" />
					</view>
				</view>
			</view>
			<view style="width: 25%;" v-for="i in 4"></view>
		</view>
		<!-- 搜索 -->
		<view class="chaxun_box">
			<view class="le_box">
				<view class="pri_box">价格</view>
				<view class="s_box" @click="peiSta">
					<image src="https://www.dingxians.cn/upload/20240801/66aae13cdc748.png" mode="scaleToFill" />
				</view>
				<view class="x_box" @click="peiSta">
					<image src="https://www.dingxians.cn/upload/20240801/66aae13ce213e.png" mode="scaleToFill" />
				</view>
			</view>
			<view class="r_sousuo_box">
				<input type="search" v-model="title" placeholder="搜索" @input="inputTitle">
				<view class="sousojian_box" @click="souBtn"></view>
			</view>
		</view>
		<!-- 内容去 -->
		<scroll-view scroll-y class="content_box" @scrolltolower="lower" v-if="goodsData.length > 0">
			<!-- <view style="display: flex; justify-content: space-between;"> -->
			<view class="dange_con_box" v-for="item, index in goodsData" :key="index"
				@click="header(`/pages/shop/detail?id=${item.id}`)">
				<view class="shangpin_bg_box">
					<image :src="item.image" mode="scaleToFill" />
				</view>
				<view class="name_box">{{ item.title }}</view>
				<view class="price_box">
					<view class="l_box">¥{{ item.price }}</view>
					<view class="r_box">参考价</view>
				</view>
			</view>
			<view style="width: 329rpx;"></view>
			<loadmore v-if="goodsData.length > 0" mode="loading2" :status="loadStatus"></loadmore>
			<!-- </view> -->
		</scroll-view>

		<empoy v-else></empoy>
	</view>
</template>
<script>
import api from '../../api/index.js'
import empoy from '../../components/empoy/empoy.vue'
import loadmore from '../../components/a_loadMore/a_loadMore.vue'
export default {
	components: {
		empoy, loadmore
	},
	data() {
		return {
			loadStatus: 'normal',//加载状态down,loading,normal
			// 分类列表
			staList: [
				{
					id: '',
					title: '全部',
					imgUrl: 'https://www.dingxians.cn/upload/20240801/66aae13cd4058.png',
				},
				{
					id: 1,
					title: '奢侈品',
					imgUrl: 'https://www.dingxians.cn/upload/20240801/66aae13cd2b42.png',
				},
				{
					id: 2,
					title: '超值数码3C',
					imgUrl: 'https://www.dingxians.cn/upload/20240801/66aae13ceeb61.png',
				},
				{
					id: 3,
					title: '电子竞技',
					imgUrl: 'https://www.dingxians.cn/upload/20240801/66aae13cecc65.png',
				},
				{
					id: 4,
					title: '苹果全家桶',
					imgUrl: 'https://www.dingxians.cn/upload/20240801/66aae13ced84a.png',
				},
				{
					id: 5,
					title: '休闲娱乐',
					imgUrl: 'https://www.dingxians.cn/upload/20240801/66aae13cf17f6.png',
				},
				{
					id: 6,
					title: '生活家电',
					imgUrl: 'https://www.dingxians.cn/upload/20240801/66aae13cd4058.png',
				},
				{
					id: 7,
					title: '手表手环',
					imgUrl: 'https://www.dingxians.cn/upload/20240801/66aae13d019e3.png',
				},
			],
			status: '',//当前点击状态
			title: '',//搜索内容
			goodsData: [],//商品list
			cat_id: '',
			page: 1,//分页
			last_page: '',
			priceSta: '',// 价格排序
			refreshStatus: false,
		}
	},
	onLoad(options) {
		this.getGoods(2)
	},
	onShow() { },
	methods: {
		// 价格排序
		peiSta() {
			if (this.priceSta == '') {
				this.priceSta = 1
			} else {
				this.priceSta = ''
			}
			this.getGoods()
		},
		// 点击分类
		staBtn(item) {
			this.status = item.id
			this.getGoods()
		},
		// 搜索
		souBtn() {
			this.getGoods()
		},
		// 获取输入框的val
		inputTitle(e) {
			this.title = e.detail.value
		},
		// 分页
		lower() {
			if (this.page > this.last_page) {
				// this.show('没有更多数据了')
				this.loadStatus = 'normal'
				return
			}
			this.page++
			this.getGoods(1)
		},
		// 商品
		getGoods(type) {
			this.loadStatus = 'loading'
			let data = {
				page: this.page,
				goods_cate_id: this.status,//分类
				price_order: this.priceSta,//价格
				title: this.title,//模糊查询
			}
			api.goods
				.index(data)
				.then((res) => {
					this.loadStatus = 'down'
					if (res.code === 200) {
						if (type === 1) {
							this.goodsData = this.goodsData.concat(res.data.data)
						} else {
							this.goodsData = res.data.data

							this.loadStatus = 'normal'
						}
						this.refreshStatus = false
					}
				})
				.catch((error) => {
					console.log(error)
				})
		},
	}
}
</script>
<style lang="scss" scoped>
.page {
	width: 100vw;
	height: 100vh;
	background-image: url('https://www.dingxians.cn/upload/20240731/66a9d6bc189f5.jpg');
	background-size: 100% 100%;
	padding-top: 80rpx;
	box-sizing: border-box;

	.head_box {
		width: 100%;
		height: 127rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 29rpx 0 10rpx;
		margin-bottom: 23rpx;

		.l_box {
			width: 122rpx;
			height: 122rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.r_box {
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #fff;
			line-height: 23rpx;
		}
	}

	.allSta_box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 60rpx;

		.sta_box {
			width: 25%;
			height: 104rpx;
			margin-bottom: 33rpx;

			.t_img_box {
				width: 70rpx;
				height: 70rpx;
				margin: auto;
				margin-bottom: 11rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.b_nam_box {
				width: 100%;
				height: 33rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.l_i_box {
					width: 24rpx;
					height: 33rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.c_t_box {
					height: 33rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 33rpx;
				}

				.r_i_box {
					width: 24rpx;
					height: 33rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.chaxun_box {
		width: 100%;
		height: 60rpx;
		box-sizing: border-box;
		padding: 0 31rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.le_box {
			height: 60rpx;
			display: flex;
			justify-content: flex-start;
			// align-items: center;

			.pri_box {
				// width: 100rpx;
				height: 60rpx;
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				margin-right: 10rpx;
			}

			.s_box {
				margin-top: 10rpx;
				width: 16rpx;
				height: 24rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.x_box {
				margin-top: 10rpx;
				width: 16rpx;
				height: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.r_sousuo_box {
			width: 400rpx;
			height: 60rpx;
			background-image: url('https://www.dingxians.cn/upload/20240801/66aae13cd1d2a.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			align-items: center;

			input {
				width: 300rpx;
				height: 60rpx;
				background-color: none !important;
			}



			.sousojian_box {
				width: 30rpx;
				height: 30rpx;
				background-image: url('https://www.dingxians.cn/upload/20240801/66aae13cdc59f.png');
				background-size: 100% 100%;
			}
		}
	}

	.content_box {
		width: 100%;
		height: calc(100vh - 660rpx);
		// display: flex;
		// justify-content: space-between;
		box-sizing: border-box;
		padding: 0 0 0 30rpx;

		.dange_con_box {
			float: left;
			margin-right: 33rpx;
			width: 320rpx;
			height: 448rpx;
			background-image: url('https://www.dingxians.cn/upload/20240801/66aae13cd573d.png');
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 27rpx 33rpx 0 32rpx;
			margin-bottom: 30rpx;

			.shangpin_bg_box {
				width: 264rpx;
				height: 263rpx;
				background-image: url('https://www.dingxians.cn/upload/20240801/66aaf2e446225.png');
				background-size: 100% 100%;
				margin-bottom: 13rpx;
				position: relative;

				image {
					width: 90%;
					height: 90%;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}

			.name_box {
				width: 100%;
				height: 60rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 限制为两行 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 超出部分用省略号表示 */
				white-space: normal;
				/* 允许换行 */
				margin-bottom: 19rpx;
			}

			.price_box {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.l_box {
					width: 164rpx;
					height: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #F56198;
					line-height: 36rpx;
				}

				.r_box {
					width: 80rpx;
					height: 36rpx;
					background: #030524;
					border-radius: 8rpx;
					opacity: 0.41;
					width: 62rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>